﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimpleList.aspx.cs" Inherits="BugSysSolution.PageTemplate.SimpleList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Knockout.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Add Item:<input type="text" data-bind="value:itemToAdd,valueUpdate: 'afterkeydown'" />
            <input type="button" value="Add" data-bind="click:addItem,enable:itemToAdd().length>0" />
        </div>

        <div>
            <select multiple="multiple" data-bind="options:allItems,selectedOptions:selectedItems" style="width: 406px; height: 181px;"></select>
            <input type="button" data-bind="click:removeSelected" value="RemoveItem" />
            <input type="button" data-bind="click:sortItems" value="Sort" />
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var model = function (arr) {
        if (arr == null) {
            arr = new Array();
        }

        this.itemToAdd = ko.observable("");

        this.allItems = ko.observableArray(arr);

        this.addItem = function () {
            if (this.itemToAdd() != "") {
                this.allItems.push(this.itemToAdd());
            }
        }

        var temp = this;
        var select = function () {
            var _arr = temp.allItems();
            var _resultarr = new Array();
            if (_arr.length == 0) {
                _resultarr.push("");
            }
            else {
                _resultarr.push(temp.allItems()[1]);
            }
            return _resultarr;
        }
        this.selectedItems = ko.observableArray(select());

        this.removeSelected = function () {
            if (this.selectedItems() == null ) {
                return;
            }
            this.allItems.removeAll(this.selectedItems());
            this.selectedItems([]);
        }

        this.sortItems = function () {
            if (this.allItems().length == 0 || this.allItems() == null) {
                return;
            }
            this.allItems.sort();
        }
    }

    var arr = ["xxx1", "xxx2", "xxx3"];

    ko.applyBindings(new model(arr));
</script>
